﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="baseUri" value="${pageContext.request.contextPath }"
       scope="request"></c:set>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书管理系统</title>
		<link rel="stylesheet" href="${baseUri}/static/layui/css/layui.css">
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">

			<!-- 引入头部导航 -->
			<c:import url="nav/titlenav.jsp"></c:import>

			<!-- 引入左边导航 -->
			<c:import url="nav/leftnav.jsp"></c:import>


			<div class="layui-body">
				<!-- 内容主体区域 -->
				<fieldset class="layui-elem-field layui-field-title"
				          style="margin-top: 20px;color: blueviolet">
					<legend>所有上架图书</legend>
				</fieldset>

				<div class="layui-form">
					<table class="layui-table" style="text-align: center;" >
						<colgroup>
							<col width="100">
							<col width="150">
							<col width="400">
							<col width="150">
							<col width="100">
							<col width="500">
							<col width="130">
							<col width="50">
							<col width="50">
							<col width="50">
							<col width="150">
						</colgroup>
						<thead>
						<tr>
							<th style="text-align: center">编号</th>
							<th style="text-align: center">ISBN</th>
							<th style="text-align: center">书名</th>
							<th style="text-align: center">作者</th>
							<th style="text-align: center">类型</th>
							<th style="text-align: center">简介</th>
							<th style="text-align: center">图片</th>
							<th style="text-align: center">查看</th>
							<th style="text-align: center">编辑</th>
							<th style="text-align: center">下架</th>
							<th style="color: red">书本状态</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach items="${requestScope.pageMsg.lists}" var="book">
							<tr>
								<td>${book.id }</td>
								<td>${book.isbn }</td>
								<td style="text-align: center">《${book.title }》</td>
								<td>${book.author }</td>
								<td><c:if test="${book.categoryId==1 }">小说</c:if>
									<c:if
											test="${book.categoryId==2 }">文学</c:if>
									<c:if
											test="${book.categoryId==3 }">动漫</c:if>
									<c:if
											test="${book.categoryId==4 }">文化</c:if>
									<c:if
											test="${book.categoryId==5 }">传记</c:if>
									<c:if
											test="${book.categoryId==6 }">艺术</c:if>
									<c:if
											test="${book.categoryId==7 }">童书</c:if>
									<c:if
											test="${book.categoryId==8 }">古籍</c:if>
									<c:if
											test="${book.categoryId==9 }">历史</c:if></td>
								<td>${book.introduction }</td>
								<td>
									<c:if test="${book.image==null}">
										<img src="${baseUri}/static/images/book.jpg" width="80px" height="100px;">
									</c:if>
									<c:if test="${book.image !=null }">
										<c:if test="${book.image=='' }">
											<img src="${baseUri}/static/images/book.jpg" width="80px" height="100px;">
										</c:if>
										<c:if test="${book.image !='' }">
											<img src="${baseUri}/upload/${book.image}" alt="" width="80px"
											     height="100px;">
										</c:if>
									</c:if>
								</td>
								<td><a class="layui-btn"
								       style="background-color: cadetblue"
								       href="bookDetail?id=${book.id }">查看</a></td>
								<td><a class="layui-btn"
								       style="background-color: rgb(204, 139, 41)"
								       href="toUpdateBook?id=${book.id }">编辑</a></td>
								<td><a class="layui-btn" id="soldBook"
								       style="background-color: rgb(211, 26, 81)"
								       href="deleteBook?id=${book.id }">下架</a>
								</td>
								<td style="text-align: center">
									<c:if test="${book.status == 0}">
										<span style="font-weight: bolder">可借</span>
									</c:if>
									<c:if test="${book.status == 1}">
										<span style="color: red;">
											<i class="layui-icon" style="font-size: 25px;font-weight: bold">&#x1006;</i><br>
											借出</span>
									</c:if>
								</td>
							</tr>
						</c:forEach>
						</tbody>
					</table>
				</div>
				<!-- 页码显示 -->
				<div class="pageshow" style="margin-bottom: 100px">
					<span> 第${requestScope.pageMsg.currPage }/${requestScope.pageMsg.totalPage}页</span>
					&nbsp;&nbsp;
					<span>总记录数：${requestScope.pageMsg.totalCount }&nbsp;&nbsp;每页显示:${requestScope.pageMsg.pageSize}</span>
					&nbsp;&nbsp; <span> <c:if
						test="${requestScope.pageMsg.currPage != 1}">
					<a href="${baseUri}/showBook?currentPage=1">[首页]</a>&nbsp;&nbsp;
					<a
							href="${baseUri}/showBook?currentPage=${requestScope.pageMsg.currPage-1}">[上一页]</a>
					&nbsp;&nbsp;
				</c:if> <c:if
						test="${requestScope.pageMsg.currPage != requestScope.pageMsg.totalPage}">
						<a
								href="${baseUri}/showBook?currentPage=${requestScope.pageMsg.currPage+1}">[下一页]</a>&nbsp;&nbsp;
					<a
							href="${baseUri}/showBook?currentPage=${requestScope.pageMsg.totalPage}">[尾页]</a>&nbsp;&nbsp;
				</c:if>
				</span>
				</div>
			</div>


			<!-- 引入底部导航 -->
			<c:import url="nav/bottom.jsp"/>
		</div>


		<script src="${baseUri}/static/layui/layui.js"></script>
		<script>
            //JavaScript代码区域
            layui.use('element', 'layer', function () {
                var element = layui.element;
                var layer = layui.layer;
                layer.open({
                    type: 4,
                    content: ['已下架', '#soldBook']
                    //数组第二项即吸附元素选择器或者DOM
                });

            });
            layui.use('carousel', function () {
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#test1',
                    width: '100%' //设置容器宽度
                    ,
                    arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
            });

		</script>
	</body>
</html>